<template>
  <div class="chart-wrapper" ref="liquidChart"></div>
</template>

<script>
import echarts from "echarts";
require("echarts-liquidfill");
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { debounce } from "@/utils/index.js";
import useResize from "@/componentApi/useResize.js";
import { selectYearValue } from "@/api/mockChart";

export default {
  name: "liquidChart",
  setup() {
    let { abcode, year, parentInfo, routerChange } = useResize();

    const liquidChart = ref(null);
    let myChart = ref(null);

    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getChartData();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    //模拟接口，获取echarts数据
    const getChartData = async () => {
      const { data } = await selectYearValue({
        year,
      });

      initEcharts(data.value);
    };

    //渲染echarts图
    const initEcharts = (data) => {
      myChart = echarts.init(liquidChart.value);
      var option = {
        // grid: {
        //   top: 25,
        //   bottom: 50,
        //   left: 70,
        //   right: 100,
        // },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // left: "right",
          top: "center",
          right:'10%',
          textStyle: {
            color: "#fff",
          },
          orient: "vertical",
          data: ["小贷行业", "小微企业", "科技企业", "三农 ", "个人", "其它"],
        },
        radar: [
          {
            indicator: [
              { text: "", max: 100 },
              { text: "", max: 100 },
              { text: "", max: 100 },
              { text: "", max: 100 },
              { text: "", max: 100 },
            ],
            radius: 100,
            center: ["30%", "50%"],
          },
        ],
        series: [
          {
            type: "radar",
            radarIndex: 0,
            areaStyle: {},
            data: [
              {
                value: [85, 91, 90, 91, 95],
                name: "小贷行业",
                itemStyle: {
                  normal: {
                    color: "rgba(0, 237, 0, 0.7)", //折线点的颜色
                    lineStyle: {
                      color: "rgba(0, 237, 0, 0.3)", //折线的颜色
                    },
                  },
                },
              },
              {
                value: [95, 80, 95, 90, 93],
                name: "小微企业",
                itemStyle: {
                  normal: {
                    color: "rgba(255, 119, 35, 1)", //折线点的颜色
                    lineStyle: {
                      color: "rgba(255, 119, 35, 1)", //折线的颜色
                    },
                  },
                },
              },
              {
                value: [95, 80, 95, 90, 13],
                name: "科技企业",
                itemStyle: {
                  normal: {
                    color: "rgba(255, 35, 201, 1)", //折线点的颜色
                    lineStyle: {
                      color: "rgba(255, 35, 201, 1)", //折线的颜色
                    },
                  },
                },
              },
              {
                value: [95, 20, 95, 10, 93],
                name: "三农",
                itemStyle: {
                  normal: {
                    color: "rgba(142, 48, 255, 1)", //折线点的颜色
                    lineStyle: {
                      color: "rgba(142, 48, 255, 1)", //折线的颜色
                    },
                  },
                },
              },
              {
                value: [5, 80, 95, 9, 93],
                name: "个人",
                itemStyle: {
                  normal: {
                    color: "rgba(70, 120, 195, 1)", //折线点的颜色
                    lineStyle: {
                      color: "rgba(70, 120, 195, 1)", //折线的颜色
                    },
                  },
                },
              },
              {
                value: [5, 80, 1, 92, 3],
                name: "其它",
                itemStyle: {
                  normal: {
                    color: "rgba(0, 186, 255, 1)", //折线点的颜色
                    lineStyle: {
                      color: "rgba(0, 186, 255, 1)", //折线的颜色
                    },
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option, true);
    };

    return {
      liquidChart,
    };
  },
};
</script>